<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>城市二次供水智能管理平台</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<style type="text/css">
			body {
				margin: 10px;
				background: #999;
			}
			
			.demo-carousel {
				height: 200px;
				line-height: 200px;
				text-align: center;
			}
			
			.layui-card-header {
				background: #01AAED;
				color: #fff
			}
			
			.layui-card-body{
				height:calc(100vh - 50px);
				overflow-y:auto ;
			}
			
			.text-container{
				position: absolute;
				bottom: 3px;
				left: 3px;
			}
			
			.text-container span{
				color: #FFF9EC;
				font-size: 18px;
				font-weight: bold;
			}
			.container {
					margin-top: 10px;
					height: 100%;
					width: 100%;
					color: #333;
					font-family: "微软雅黑";
				}
			
				.title {
					margin-top: 5px;
					width: 100%;
					height: 25px;
					line-height: 30px;
			
				}
			
				.title a {
					padding-left: 20px;
					text-decoration: none;
				}
			
				a:hover {
					color: blue;
				}
			
				img {
					object-fit: cover;
				}
			
				.img_container {
					overflow: hidden;
					width: 100%;
					height: 120px;
					margin-top: 15px;
				}
			
				.img_container img {
					width: 100%;
					min-height: 120px;
					object-fit: cover;
				}
			
				.table_contianer {
					margin-top: 5px;
			
					width: 100%;
					margin: 5px;
				}
			
				.table_context {
					padding-left: 5px;
					border-collapse: separate;
					border-spacing: 0px 10px;
				}
			
				.table_value {
					text-align: left;
				}
			
				.line {
					margin-top: 10px;
					background: #ccc;
					width: 100%;
					height: 2px;
				}
		</style>
	</head>

	<body>
		<div class="layui-row layui-col-space1">
			<div class="layui-col-md3">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="test12" class="demo-tree-more"></div>
					</div>
				</div>
				
			</div>
			<div class="layui-col-xs9">
				<div class="layui-card">
					<div class="layui-card-body">
						<div id="map" style="width: 100%; height: 100%;"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oSoZAPv0Q3ShlkEDZsZmkg6fvSyhzKCU"> </script>
	<script src="./layui/layui.js"></script>
	<script src="./static/js/mapUtils.js"></script>
	<script>
		//JavaScript代码区域
		layui.config({
			base: './static/js/',
		}).extend({ //设定模块别名
			mapControl: 'mapControl'
		});
		let mapCtrl = null;
		layui.use(['layer', 'form', 'mapControl', 'tree', 'util'], function() {
			let layer = layui.layer;
			let form = layui.form;
			mapCtrl = layui.mapControl;
			let tree = layui.tree;
			let util = layui.util;
			mapCtrl.init();
			
			var app = {};
			//模拟数据
			data = [{
				title: '南疆',
				id: 1,
				field: 'name1',
				checked: true,
				spread: true,
				children: [{
						title: '翠屏城小区',
						id: 3,
						field: '',
						spread: true,
						children: [{
							title: '翠屏城1号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城2号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城3号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城4号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城5号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城6号泵房',
							id: 20,
							field: ''
						}, {
							title: '翠屏城7号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '世纪花园小区',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '世纪花园1号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园2号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园3号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园4号泵房',
							id: 20,
							field: ''
						}, {
							title: '世纪花园5号泵房',
							id: 20,
							field: ''
						}]
					}, {
						title: '奧斯伯恩庄园',
						id: 20,
						field: '',
						spread: true,
						children: [{
							title: '奧斯伯恩1号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩2号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩3号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩4号泵房',
							id: 20,
							field: ''
						}, {
							title: '奧斯伯恩5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '碧水湾小区',
						id: 20,
						field: '',
						children: [{
							title: '碧水湾1号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾2号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾3号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾4号泵房',
							id: 20,
							field: ''
						}, {
							title: '碧水湾5号泵房',
							id: 20,
							field: ''
						}]
					},
					{
						title: '秣陵福源小区',
						id: 20,
						field: '',
						children: [{
							title: '秣陵福源1号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源2号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源3号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源4号泵房',
							id: 20,
							field: ''
						}, {
							title: '秣陵福源5号泵房',
							id: 20,
							field: ''
						}]
					}
				]
			}]
			
			//基本演示
			tree.render({
				elem: '#test12',
				data: data,
				showCheckbox: true //是否显示复选框
					,
				id: 'demoId1',
				isJump: true //是否允许点击节点时弹出新窗口跳转
					,
				click: function(obj) {
					var data = obj.data; //获取当前点击的节点数据
					//layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
					layer.open({
					    type: 2,
						area: ['800px', '400px'],
					    fix: false, //不固定
					    maxmin: true,
					    shadeClose: true,
					    shade: 0.4,
					    title: data.title,
					    content: 'deviState.html'
					});
				}
			});
		});
	</script>
</html>
